import React, { Component } from 'react';
import store from './store'
import { connect } from 'react-redux' // 引入连接器

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
    }
    render() {
        return (
            <div>
                <div>
                    <input value={this.props.inputValue} onChange={this.props.inputChange}/>
                    <button onClick={this.props.addItem}>提交</button>
                </div>
                <ul>
                    {
                        this.props.list.map((item, index) => {
                        return (  <li key={index} onClick={() => {this.props.delItem(index)}}>{item}</li>)
                        })
                    }
                </ul>
            </div>
        );
    }

   
}

// 映射关系
const stateToProps = (state) => {
    return {
        list:state.list,
        inputValue: state.inputValue
    }
}

// 映射关系
const dispatchToProps = (dispatch) => {
    return {
        inputChange (e) {
            console.log(e.target.value)
            const action = {
                type:'change_input',
                value: e.target.value
            }
            dispatch(action)
        },

        addItem () {
            const action = { type:'add_item'}
            dispatch(action)
        },

        delItem (index) {
            console.log(index)
            const action = {
                type:'del_item',
                index
            }
            dispatch(action)
        }
    }
}

export default connect(stateToProps,dispatchToProps)(TodoList);